<template>
    <!-- 榜单 -->
    <div class="box">
        <div class="box-t tanxin">
            <ul class="box-ul tanxin">
                <li>榜单</li>
            </ul>
            <span class="ul-r">更多 >></span>
        </div>
        <div class="box-c tanxin">
            <dl class="blk" v-for="(item,index) in TopList" :key="index">
                <dt class="top tanxin">
                    <div class="topl">
                        <img :src="item.coverImgUrl">
                    </div>
                    <div class="topr">
                        <h3 class="title">{{item.name}}</h3>
                        <p>
                            <a href="javascript:;" class="play"></a>
                            <a href="javascript:;" calss="shoucang"></a>
                        </p>
                    </div>
                </dt>
                <dd v-for="(items,indexs) in personlist[index]" :key="indexs" class="musicList">
                    <span :class="indexs<3?'no-top':''">{{indexs+1}}.</span>
                    <a href="#" class="nm ellipsis">{{items.name}}</a>
                    <div class="box-i">
                        <i @click="songUrl(items.id)" class="onei"></i>
                        <i class="twoi"></i>
                        <i class="threei"></i>
                    </div>
                </dd>
                <dd class="morebox"><span class="more">查看更多 ></span></dd>
            </dl>
        </div>
    </div>
</template>

<script>
import { TopListApi, PersonalizedApi,songApi } from '@/request/api'
export default {
    data() {
        return {
            // 3个
            TopList: [],
            // 10个为一组的二维数组
            personlist: [],
        }
    },
    methods: {
        songUrl(val) {
            console.log(val);
            songApi(val).then(res => {
                if (res.data.code === 200) {
                    console.log(res.data.data[0].url);
                    this.$store.state.playerUrl = res.data.data[0].url;
                }
            })
        },

    },
    created() {
        TopListApi().then(res => {
            // console.log(res);
            if (res.data.code === 200) {
                this.TopList = res.data.list.slice(0, 3);
                // console.log(this.TopList);
            }
        })
        PersonalizedApi({ id: '19723756' }).then(res => {
            // console.log(res)
            if (res.data.code === 200) {
                for (let i = 0; i < 3; i++) {
                    let b = res.data.playlist.tracks.slice(i * 10, i * 10 + 10);
                    this.personlist.push(b);
                }
                // this.personlist = res.data.playlist.tracks.slice(0,30);
                // console.log(this.personlist);
            }
        })
    }
}
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
*{
    padding: 0;
    margin: 0;
    list-style: none;
}
.box{
    background-color: #fff !important;
}
.box-t {
    margin-top: 40px;
    border-bottom: 2px solid brown;
    justify-content: space-between;
    .box-ul {
        li {
            padding: 0 15px;
            margin: 15px 0;
            border-right: 1px solid #000;
            cursor: pointer;
        }
        li:first-child {
            font-size: 20px;
            padding-left: 0;
            border: none;
        }
     
    }
    .ul-r {
        cursor: pointer;
    }
}
.box-c{
    width: 100%;
    margin-top: 20px;
    border: 1px solid #ccc;
    background-color: #f4f4f4;
    .blk{
        width: 33.333333%;
        border-right: 1px solid #ccc;
        .top {
           display: flex;
           justify-content: center;
           height: 120px;
           background-color: #e8e8e8;
            .topl{
                img{
                    width: 80px;
                    height: 80px;
                }
            }
            .topr {
                .title {
                    margin: 10px 10px;
                }
                a {
                    display: inline-block;
                    width: 22px;
                    height: 22px;
                    background: url(../../assets/images/index.png) no-repeat;
                    margin: 0px 10px 0px 0px;
                    background-position: -300px -236px;
                    &.play {
                        margin-left: 10px;
                        background-position: -267px -235px;
                    }
                }
            }
        }
        .musicList{
            padding-left: 20px;
            font-size: 12px;
            height: 35px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span{
                margin-right: 20px;
            }
            a{
                text-decoration: none;
                width: 100px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
            .box-i{
                width: 100px;
                height: 35px;
                display: flex;
                justify-content: center;
                align-items: center;
                i {
                    display: inline-block;
                    width: 17px;
                    height: 17px;
                    background: url(../../assets/images/index.png);
                    margin: 0 3px;
                    cursor: pointer;
                    display: none;
                    &.onei {
                        background-position: -267px -268px;
                        &:hover {
                            background-position: -267px -288px;
                        }
                    }
                    &.twoi {
                        background: url(../../assets/images/icon.png);
                        background-position: 2px -698px;
                        &:hover {
                            background-position: -20px -698px;
                        }
                    }
                    &.threei {
                        background-position: -297px -268px;
                        &:hover {
                            background-position: -297px -288px;
                        }
                    }
                }
            }
            .box-i:hover {
                i {
                    display: inline-block;
                }
            }
        }
        .musicList:nth-child(2n-1){
            background-color: #fff;
        }
        .morebox{
            height: 35px;
            line-height: 35px;
            text-align: right;
            font-size: 14px;
            span{
                padding-right: 30px;
                cursor: pointer;
            }
        }
    }
}
</style>